<!--
 * @Description: Echarts
 * @Author: rendc
 * @Date: 2025-11-17 09:34:06
 * @LastEditors: rendc
 * @LastEditTime: 2025-11-17 14:30:21
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Echarts图表 - 图例</title>
  <!-- 相对路径 -->
  <script src="./js/echarts.js"></script>
  <style>
    .echartDiv{
      border: 1px solid red;
    }
  </style>
</head>
<body>
  Echarts
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main3" class="echartDiv" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    // main3的js代码 - 饼图
    // 获取要绘制图表的dom元素
    var main3Div = document.getElementById("main3");
    // 初始化为echarts实例对象
    var myChart3 = echarts.init(main3Div,'light');
    // var myChart3 = echarts.init(main3Div,'dark');
    // 准备图表的option3
    var option3 = {
      title: {
        text: '双十一各类衣服销量',
        subtext: '副标题',
        left: 'center',// 设置标题位置
      },
      tooltip: {
        trigger: 'item',
      },
      // 图例
      legend: {
        // data: ['销量']
        // 排列方式 默认水平 
        // orient: 'vertical',
        // 位置 默认 center
        // left: 'left',
        // backgroundColor: '#ccc',
        // textStyle: {
        //   color: '#333'
        //   // ...
        // },
        // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
        // icon: 'image://https://aisearch.cdn.bcebos.com/homepage/aiapp/ai%E9%98%85%E8%AF%BB.png',
        type: 'scroll',
        // 设置图例的选中
        selected: {
          衬衫: false,
          羊毛衫: false,
        },
        top:0,
      },
      series: [
        {
          name: '销量',
          // 折线图
          type: 'pie', 
          // 设置饼的大小
          radius: '50%',

      color: [
        '#dd6b66',
        '#759aa0',
        '#e69d87',
        '#8dc1a9',
        '#ea7e53',
        '#eedd78',
        '#73a373',
        '#73b9bc',
        '#7289ab',
        '#91ca8c',
        '#f49f42'
      ],
      // 高亮时的样式、鼠标移到元素上的时候
      emphasis: {
        // 图形本身的样式
        itemStyle: {
          color:'red',
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        // 标签 - 图形的指示器 的样式
        label: {
          show: true,
          color:'red',
          fontSize:30,
          // 高亮时标签的文字。
          // formatter: 'This is a emphasis label.'
        }
      },
      data: [
          {name:'衬衫',value:5},
          {name:'羊毛衫',value:10},
          {name:'雪纺衫',value:25},
          {name:'裤子',value:15},
          {name:'高跟鞋',value:55},
          {name:'袜子',value:55},
          {name:'衬衫1',value:5},
          {name:'羊毛衫1',value:10},
          {name:'雪纺衫1',value:25},
          {name:'裤子1',value:15},
          {name:'高跟鞋1',value:55},
          {name:'袜子1',value:55},
          ]
        }
      ]
    };
    // 将option3赋值给图表myChart2
    myChart3.setOption(option3);
  </script>
</body>
</html>